<template>
  <div style="height:300px;width:600px;background-color:transparent;" :id="ecahtsContainer" @dblclick="getNewChart()"/>

</template>
<style>
</style>

<script>
import extend from './../chart/js/extend'
// 引入echats依赖

// 引入 ECharts 主模块

var echarts = require('echarts/lib/echarts')

extend(echarts)
const guid = function () {
  function S4 () {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return (
    S4() +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    S4() +
    S4()
  )
}
var colors = ['#5793f3', '#d14a61', '#675bba']
export default {
  props: [
    // 传递行数据
    'datas',
    // 数据源
    'dates',
    'datas1',

    'Stcd',

    'chartTitle'
  ],
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(
      document.getElementById(this.ecahtsContainer),
      'essos'
    )
    this.init()
  },
  methods: {
    // 配置项
    option: function () {
      let _this = this
      return {
        color: colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['2017 降水量', '2018 降水量']
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '汉口水位：  ' + params.value +
                            (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                }
              }
            },
            data: _this.dates
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0]
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '汉口水位：  ' + params.value +
                            (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                }
              }
            },
            data: _this.dates
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '2017 汉口水位',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data: _this.datas
          },
          {
            name: '2018 汉口水位',
            type: 'line',
            smooth: true,
            data: _this.datas1
          }
        ]
      }
    },

    // 初始化函数
    init () {
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option())
    }
  },
  watch: {
    dates () {
      this.dates2 = this.dates
    },
    datas () {
      this.datas2 = this.datas
    },
    datas2 () {
      this.myChart.setOption(this.option())
    },
    dates2 () {
      this.myChart.setOption(this.option())
    }
  },
  // 状态
  data () {
    return {
      // 图表实例
      myChart: {},
      // 容器ID使用guid防止全局多次复用容器重复
      ecahtsContainer: guid(),
      // 点名称
      chartDataName: '',
      // 主
      mouseCurValue: '',
      datas2: '',
      dates2: ''
    }
  }
}
</script>
